const path = require('path');
// 自动生成html模板并动态加载生产的xxx.bundle.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 每次打包时清空指定文件夹
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require('webpack');

module.exports = {
	mode: 'development', // 'production',
	// entry: './src/entrys/entry-hot.js',
	entry: {
		app: './src/entrys/entry_hot.js'
	},
	output: {
		filename: '[name].bundle.js', // 根据entry动态输出
		path: path.resolve(__dirname, '../dists/hot'),
		publicPath: './'
	},
	devtool: 'inline-source-map', //明确指出运行时的报错文件，(由打包后的bundle.js映射的源文件)
	devServer: { // 需要安装webpack-dev-server插件，执行 npm run dev后监听文件改变后不需要刷新浏览器，浏览器自动刷新渲染
		contentBase: '../dist3', //编译输出目录 等同于output下path路径 path.resolve(__dirname, '../dist2'),
		publicPath: '/',
		hot: false,	// 模块热替换，true就不需要在插件下配置webpack.NamedModulesPlugin， webpack内部已经集成
		host: '0.0.0.0', //'localhost', // 默认是 localhost。如果你希望服务器外部可访问，指定如下：
		useLocalIp: true,	// 打开浏览器窗口是启用本地ip, 需要上面host设置为'0.0.0.0'
  		port: 9000,
		open: true,
		quiet: true, // necessary for FriendlyErrorsPlugin ,启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。
		proxy: {
			
		},
	},
	plugins: [
		new CleanWebpackPlugin({
			cleanStaleWebpackAssets: false // true清理所有文件， false只删除变动过的文件(如执行 npm run watch时dist下的index.html时没有改变的，不需要删除)
		}), // 每次打包前删除dist文件夹
		new HtmlWebpackPlugin({
			title: 'Hot Module Replacement',
			filename: 'index.html', // 修改filename后，需要显示的指定入口html名称
			// template: 'index.html',
			inject: true,
			// favicon: path.join(__dirname, '..', 'favicon.ico')
		}),
		new webpack.NamedModulesPlugin(),
		// 如果上面devServer.hot为true, 则不需要再配置下面webpack.HotModuleReplacementPlugin， 因为webpack内部已经帮忙集成
	    // new webpack.HotModuleReplacementPlugin() // 控制webpack热模块更新
	],
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: [
					'file-loader'
				]
			}
		]
	}
}